<template>
	<view>
		<wp-search class="clientRect" :placeholder="$t('operate.searchForBrands')" @clearInput="clearInput" @cancelFocus="cancelFocus">
			<!-- <block slot="right">
				<view class="search_button" @click="openPopup">
					搜索
				</view>
			</block> -->
		</wp-search>
		<wp-tabs :list="list" :is-scroll="false" active-color="#111111" :current="current" @onChange="change"></wp-tabs>
		<mescroll-uni ref="mescrollRef" :top="topHeight" @init="mescrollInit" :down="downOption" @down="downCallback"
			@up="upCallback">
			<view class="brand-list">
				<view class="brand-item" v-for="(item,index) in tableList" :key='index' @click="goDetails(item)">
					<image class="brand-logo" :src="item.logo"></image>
					<view class="item-right">
						<view>
							<view class="name">{{item.enName}}</view>
							<view class="cateHotList">
								<block>{{item.cateHotListStr}}</block>
							</view>
						</view>
						<text class="iconfont iconarrow-right1"></text>
					</view>
				</view>
			</view>
		</mescroll-uni>
		<lb-picker ref="picker1" :cancelText="$t('publicLang.cancel')" :confirmText="$t('publicLang.sure')" v-model="value1" mode="selector" :list="list1" :dataset="{ name: 'label1' }"
			@change="handleChange" @confirm="handleConfirm" @cancel="handleCancel">
		</lb-picker>
	</view>
</template>

<script>
	let app = getApp();
	import {
		brandPage
	} from '@/api/brand.js';
	import wpSearch from "@/components/search/search.vue"
	import wpTabs from "@/components/wp-tabs/wp-tabs.vue";
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		components: {
			wpSearch,
			wpTabs
		},
		data() {
			return {
				upOption: {
					auto: false, // 不自动加载
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 20, // 每页数据的数量
					},
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				},
				tableList: [],
				tableFrom: {
					type: 1,
					enName: null,
					cateType: 0,
					isAdvice: null,
					pageNow: 1,
					pageSize: 20,
				},
				list: [{
						name: this.$t('operate.all'), //全部
						value: "1",
					},
					{
						name: this.$t('operate.homeRecommended'), //首页推荐
						value: "2",
					},
					{
						name: this.$t('operate.categoryRecommendation'), //分类推荐
						value: "3",
					}
				],
				current: 0,

				list1: [{
						label: this.$t('operate.menRecommendation'),  //男士推荐
						value: '1'
					},
					{
						label: this.$t('operate.ladiesRecommend'), //女士推荐
						value: '2'
					},
					{
						label: this.$t('operate.recommendedForChildren'), //儿童推荐
						value: '3'
					}
				],
				value1: ""
			}
		},
		computed: {
			topHeight() {
				return "204rpx"
			}
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('navigation.merchantBrand')
			});
		},
		methods: {
			upCallback(page) {
				var _this = this
				this.tableFrom.pageNow = page.num
				brandPage(this.tableFrom).then(res => {
					console.info(res.data, 123)
					var data = res.data.list
					if (page.num == 1) _this.tableList = [];
					data.map((i, index) => {
						let str = []
						if (i.isAdvice) {
							str.push(_this.$t('operate.homeRecommended'))
						}
						i.cateHotList.map((j, jndex) => {
							if (j == 1) {
								str.push(_this.$t('operate.menRecommendation'))
							}
							if (j == 2) {
								str.push(_this.$t('operate.ladiesRecommend'))
							}
							if (j == 3) {
								str.push(_this.$t('operate.recommendedForChildren'))
							}
						})
						i.cateHotListStr = str.toString()
					})
					_this.tableList = _this.tableList.concat(data);

					_this.mescroll.endBySize(data.length, res.data.total)
				}).catch((e) => {
					_this.mescroll.endErr()
					uni.showToast({
						title: e,
						icon: "none"
					})
				});
			},
			clearInput() {
				this.tableFrom.enName = ''
				this.mescroll.resetUpScroll(false)
			},
			cancelFocus(e) {
				if (e.type === "focus") return
				this.tableFrom.enName = e.search
				this.mescroll.resetUpScroll(false)
			},
			change(e) {
				console.info(e)
				this.current = e.current
				if (e.current == 0) {
					this.tableFrom.type = 1
					this.tableFrom.cateType = 0
					this.tableFrom.isAdvice = null
					this.tableFrom.pageNow = 1
					this.mescroll.resetUpScroll(false)
				}
				if (e.current == 1) {
					this.tableFrom.isAdvice = 1
					this.tableFrom.cateType = 0
					this.mescroll.resetUpScroll(false)
				}
				if (e.current == 2) {
					this.tableFrom.isAdvice = null
					// this.mescroll.resetUpScroll(false)
					this.$refs.picker1.show()
				}
			},
			handleChange(e) {
				console.log('change::', e)
			},
			handleConfirm(e) {
				// 如果存在多个picker，可以在picker上设置dataset属性，confirm中获取，就能区分是哪个picker了
				console.log('confirm::', e)
				if (e) {
					this.value1 = e.value
					this.tableFrom.cateType = e.value
					this.mescroll.resetUpScroll(false)
				}
			},
			handleCancel(e) {
				console.log('cancel::', e)
			},
			goDetails(item) {
				let _this = this
				uni.navigateTo({
					url: "brand_details/index",
					events: {
					    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
					    someEvent: function(data) {
					      _this.mescroll.resetUpScroll(false)
					    },
					},
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('brandDetailsData', {
							data: item
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.search_button {
		width: 109rpx;
		height: 64rpx;
		background-color: #000000;
		color: #FFFFFF;
		text-align: center;
		line-height: 64rpx;
		border-radius: 8rpx;
		margin-left: 17rpx;
	}

	.brand-list {
		.brand-item {
			width: 100%;
			padding: 14rpx 32rpx;
			display: flex;
			align-items: center;
			background-color: #FFFFFF;
			margin-bottom: 12rpx;

			.brand-logo {
				box-sizing: border-box;
				border: 1rpx solid #f1f1f1;
				width: 120rpx;
				height: 120rpx;
			}

			.item-right {
				height: 120rpx;
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-left: 12rpx;

				.cateHotList {
					margin-top: 11rpx;
					font-size: 24rpx;
					color: #BBBBBB;
				}
			}
		}
	}

	.cate-list {
		margin-top: 80rpx;

		.cate-item {
			border-bottom: 1rpx solid #EEEEEE;
			text-align: center;
			padding: 20rpx;
		}

		.cate-item:first-child {
			border-top: 1rpx solid #EEEEEE;
		}
	}
</style>
